<template>
  <div class="pharmacyApplyMgt pd-20">
    <el-table v-loading="loading"
              border
              element-loading-text="执行中..."
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.5)"
              ref="multipleTable"
              :data="dataList"
              height="780"
              style="width: 100%"
              class="mt-20">
      <el-table-column align="center"
                       type="index"
                       label="序号"
                       min-width="20">
      </el-table-column>
      <el-table-column prop="name"
                       align="center"
                       label="名称"
                       min-width="30">
      </el-table-column>
      <el-table-column prop="phone"
                       align="center"
                       label="电话"
                       min-width="80">
      </el-table-column>
      <el-table-column prop="email"
                       align="center"
                       label="邮箱"
                       min-width="100">
      </el-table-column>
      <el-table-column prop="position"
                       align="center"
                       label="职位"
                       min-width="50">
      </el-table-column>
      <el-table-column prop="orgName"
                       align="center"
                       label="机构名"
                       min-width="50">
      </el-table-column>
      <el-table-column align="center"
                       label="证书"
                       min-width="100">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px"
                    :src="scope.row.credentialsList[0]"
                    :preview-src-list="scope.row.credentialsList">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="授权书"
                       min-width="100">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px"
                    :src="scope.row.authorizeList[0]"
                    :preview-src-list="scope.row.authorizeList">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="状态"
                       min-width="50"
                       :formatter="formatterStatus">
      </el-table-column>
      <el-table-column align="center"
                       label="操作员"
                       min-width="50">
        <template slot-scope="scope">
          <span v-if="scope.row.adminDto != null">{{scope.row.adminDto.userName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="创建时间"
                       width="150"
                       :formatter="formatterDate">
      </el-table-column>
      <el-table-column min-width="100"
                       align="center">
        <template slot="header"
                  slot-scope="scope">
          <el-input v-model="phone"
                    size="mini"
                    @keyup.enter.native="searchMethod"
                    placeholder="请输入电话号码搜索"
                    clearable />
        </template>
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0">
            <el-button type="primary"
                       @click="changeStatus(scope.row, 1)">通 过</el-button>
            <el-button type="danger"
                       @click="openDialog(scope.row, -1)">驳 回</el-button>
          </span>
          <span v-if="scope.row.status === 1">已通过</span>
          <span v-if="scope.row.status === -1">驳回原因：{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <infinite-loading slot="append"
                        @infinite="initTableData"
                        :identifier="infiniteId"
                        force-use-infinite-wrapper=".el-table__body-wrapper">
      </infinite-loading>
    </el-table>
    <el-dialog title="驳回原因"
               :visible.sync="dialogVisible"
               width="30%">
      <el-input type="textarea"
                :rows="2"
                placeholder="请输入驳回原因"
                v-model="remark">
      </el-input>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="changeStatus(rowData, status)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "pharmacyApplyMgt",
    data () {
      return {
        dialogVisible: false,
        loading: false,
        phone: '',
        pageIndex: 0,
        pageSize: 10,
        dataList: [],
        infiniteId: 0,
        state: '',
        rowData: {
          id: '',
          name: '',
          email: '',
          remark: ''
        },
        status: '',
        remark: null
      }
    },
    methods: {
      initTableData ($state) {
        this.state = $state;
        let param = {
          phone: this.phone,
          pageSize: this.pageSize,
          pageIndex: this.pageIndex
        };
        this.post(this.api.pharmacyPrescriptionApplyList.url, param).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.pageIndex += 1;
              this.dataList = this.dataList.concat(res.data.object);
              $state.loaded();
            } else {
              $state.complete();
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      searchMethod () {
        if (this.phone === '') {
          this.pageIndex = 0;
          this.dataList = [];
          this.infiniteId += 1;
        } else {
          this.pageIndex = 0;
          this.dataList = [];
          this.initTableData(this.state)
        }
      },
      changeStatus (row, status) {
        this.loading = true;
        this.dialogVisible = false;
        let param = {
          id: row.id,
          status: status,
          name: row.name,
          email: row.email,
          remark: this.remark
        };
        this.post(this.api.modifyPharmacyPrescriptionApplyStatus.url, param).then((res) => {
          if (res.data.code === '200') {
            this.loading = false;
            this.$message({
              showClose: true,
              message: "操作成功,已向相应邮箱发送相关邮件!",
              type: 'success'
            });
            this.searchMethod()
          } else {
            this.loading = false;
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            });
            this.searchMethod()
          }
        });
      },
      openDialog (row, status) {
        this.dialogVisible = true;
        this.rowData = row;
        this.status = status
      },
      formatterStatus (row) {
        if (row.status === -1) {
          return "已驳回"
        }
        if (row.status === 0) {
          return "已提交"
        }
        if (row.status === 1) {
          return "已通过"
        }
      },
      formatterDate (row) {
        return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm')
      }
    }
  }
</script>

<style scoped>
</style>
